<template>
<div class="tabmain">
    <Tab>
        <el-tooltip effect="dark" content="提交标注的关系并保存" placement="top-start">
        <TabItem style="background:#4fd364">
            <template v-slot:item-img>
                <img src="@/assets/image/tab/right.svg" alt="" @click="right" >
            </template>
</TabItem>
</el-tooltip>
<el-tooltip effect="dark" content="提交标注错误关系" placement="top-start">
    <TabItem style="background:#f74c4a">
        <template v-slot:item-img>
                <img src="@/assets/image/tab/error.svg" alt="" @click="error">
            </template>
    </TabItem>
</el-tooltip>
<el-tooltip effect="dark" content="跳到下一段落" placement="top-start">
    <TabItem style="background:#b9b9b9">
        <template v-slot:item-img>
                <img src="@/assets/image/tab/skip.svg" alt="" @click="next">
            </template>
    </TabItem>
</el-tooltip>
<el-tooltip effect="dark" content="返回上一段落" placement="top-start">
    <TabItem style="background:#b9b9b9">
        <template v-slot:item-img>
                <img src="@/assets/image/tab/back.svg" alt="" @click="back">
            </template>
    </TabItem>
</el-tooltip>
</Tab>
</div>
</template>

<script>
    import TabItem from './tabmain/tabitem'
    import Tab from './tabmain/tab'
    export default {
        name: 'tabmain',
        components: {
            TabItem,
            Tab
        },
        data() {
            return {
                parId: 2
            }
        },
        methods: {
            next() {
                this.$emit('next')
            },
            back() {
                this.$emit('back')
            },
            right() {
                this.$emit('right')
            },
            error() {
                this.$emit('error')
            }
        },
    }
</script>

<style>

</style>